<template>
  <a-sub-menu :key="menuInfo.spyCode">
    <template #title>
      <div class="menu-box" @click="toggleMenu">
        <img
          src="@/assets/img/menuLogo.png"
          alt=""
          class="logo"
          v-if="!checkedItem"
        />
        <img src="@/assets/img/active.png" alt="" class="active" v-else />
        <div :class="{ colorStyle: checkedItem }">{{ menuInfo.title }}</div>
        <up-outlined
          :class="{
            'right-icon': true,
            rotateStyle: isOpen,
            colorStyle: checkedItem,
          }"
        />
      </div>
    </template>
    <template v-for="item in menuInfo.children">
      <a-menu-item
        v-if="!item.children || item.children.length === 0"
        :key="item.spyCode"
        @click="toUrl(item.name)"
      >
        <span class="menu-title">{{ item.title }}</span>
      </a-menu-item>
      <sub-menu
        v-else
        :key="`${item.spyCode}-${item.name}`"
        :menu-info="item"
      />
    </template>
  </a-sub-menu>
</template>
<script>
import { UpOutlined } from "@ant-design/icons-vue";
export default {
  name: "subMenu",
  props: ["menuInfo", "collapse"],
  data() {
    return {
      isOpen: false,
      checkedItem: false,
    };
  },
  components: {
    UpOutlined,
  },
  methods: {
    toggleMenu() {
      console.log(this.isOpen);
      this.isOpen = !this.isOpen;
    },
    toUrl(name) {
      this.$router.push({
        name,
      });
      this.checkedItem = true;
    },
  },
};
</script>
<style lang="less" scoped>
.menu-box {
  display: flex;
  align-items: center;
  width: 100%;
  position: relative;
  .right-icon {
    position: absolute;
    right: 0;
    transition: all 0.4s ease;
  }
  .rotateStyle {
    transform: rotate(180deg);
    transition: all 0.4s ease;
  }
  .colorStyle {
    color: #3e77fa;
  }
  .logo,
  .active {
    width: 16px;
    height: 16px;
    margin-right: 16px;
  }
  .active {
    width: 25px;
    height: 25px;
  }
}
.menu-title {
  margin-left: 33px;
  font-size: 16px;
  font-weight: 400;
}
/deep/ .ant-menu-submenu-arrow {
  display: none;
}
</style>
